<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg flex">
			<view class="must" v-if="item.hasOwnProperty('require') && item.require">
				*
			</view>
		
			<view class="title">
				{{ item.title }}
			</view>
		</view>
		
		<view class="wrap-list m-t-30">
			<block v-if="value !== ''">
				<view class="photo-item">
					<image
						class="photo-img"
						:src="$wanlshop.oss(value)"
					/>
		
					<image
						class="photo-delete"
						:src="$staticImagePath('store/delete.png')"
						@click="onDeleteImage()"
					/>
				</view>
			</block>
		
			<block v-else>
				<image
					class="photo-item"
					:src="$staticImagePath('store/upload.png')"
					@click="onChooseImage"
				/>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		methods: {
			/**
			 * 选择图片
			 */
			onChooseImage() {
				this.$filters.onChooseImage(1, (list) => {
					this.onUploadImage(list[0]);
				});
			},
			/**
			 * 上传图片
			 */
			onUploadImage(file) {
				this.$commonNetwork.onUploadFile(file, (res) => {
					this.$emit("input", res.url);
				});
			},
			/**
			 * 删除图片
			 */
			onDeleteImage() {
				this.$emit("input", "");
			},
		},
	}
</script>

<style>
	@import "../css/form.css";
</style>